#set( $symbol_pound = '#' )
#set( $symbol_dollar = '$' )
#set( $symbol_escape = '\' )
<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../jquery/jquery-1.9.1.min.js'></script>
<script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script>

	${symbol_dollar}(document).ready(function() {
	
	
		/* initialize the external events
		-----------------------------------------------------------------*/
	
		${symbol_dollar}('${symbol_pound}external-events div.external-event').each(function() {
		
			// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
			// it doesn't need to have a start or end
			var eventObject = {
				title: ${symbol_dollar}.trim(${symbol_dollar}(this).text()) // use the element's text as the event title
			};
			
			// store the Event Object in the DOM element so we can get to it later
			${symbol_dollar}(this).data('eventObject', eventObject);
			
			// make the event draggable using jQuery UI
			${symbol_dollar}(this).draggable({
				zIndex: 999,
				revert: true,      // will cause the event to go back to its
				revertDuration: 0  //  original position after the drag
			});
			
		});
	
	
		/* initialize the calendar
		-----------------------------------------------------------------*/
		
		${symbol_dollar}('${symbol_pound}calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			droppable: true, // this allows things to be dropped onto the calendar !!!
			drop: function(date, allDay) { // this function is called when something is dropped
			
				// retrieve the dropped element's stored Event Object
				var originalEventObject = ${symbol_dollar}(this).data('eventObject');
				
				// we need to copy it, so that multiple events don't have a reference to the same object
				var copiedEventObject = ${symbol_dollar}.extend({}, originalEventObject);
				
				// assign it the date that was reported
				copiedEventObject.start = date;
				copiedEventObject.allDay = allDay;
				
				// render the event on the calendar
				// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
				${symbol_dollar}('${symbol_pound}calendar').fullCalendar('renderEvent', copiedEventObject, true);
				
				// is the "remove after drop" checkbox checked?
				if (${symbol_dollar}('${symbol_pound}drop-remove').is(':checked')) {
					// if so, remove the element from the "Draggable Events" list
					${symbol_dollar}(this).remove();
				}
				
			}
		});
		
		
	});

</script>
<style>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
		
	${symbol_pound}wrap {
		width: 1100px;
		margin: 0 auto;
		}
		
	${symbol_pound}external-events {
		float: left;
		width: 150px;
		padding: 0 10px;
		border: 1px solid ${symbol_pound}ccc;
		background: ${symbol_pound}eee;
		text-align: left;
		}
		
	${symbol_pound}external-events h4 {
		font-size: 16px;
		margin-top: 0;
		padding-top: 1em;
		}
		
	.external-event { /* try to mimick the look of a real event */
		margin: 10px 0;
		padding: 2px 4px;
		background: ${symbol_pound}3366CC;
		color: ${symbol_pound}fff;
		font-size: .85em;
		cursor: pointer;
		}
		
	${symbol_pound}external-events p {
		margin: 1.5em 0;
		font-size: 11px;
		color: ${symbol_pound}666;
		}
		
	${symbol_pound}external-events p input {
		margin: 0;
		vertical-align: middle;
		}

	${symbol_pound}calendar {
		float: right;
		width: 900px;
		}

</style>
</head>
<body>
<div id='wrap'>

<div id='external-events'>
<h4>Draggable Events</h4>
<div class='external-event'>My Event 1</div>
<div class='external-event'>My Event 2</div>
<div class='external-event'>My Event 3</div>
<div class='external-event'>My Event 4</div>
<div class='external-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove after drop</label>
</p>
</div>

<div id='calendar'></div>

<div style='clear:both'></div>
</div>
</body>
</html>
